<template>
	<view class="tDetail">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">队员详情</block>
		</cu-custom>			
		<view class="top">
			<view><image class="avatar" :src="avatar"></image></view>
			<view>
				<text class="name">{{ Info.weixin_name }}</text>
				<text class="tx">推荐人:{{ Info.parent_name }}</text>
				<view><text class="id" v-for="(item ,i) in Info.ident" :key="i">{{ item }}</text></view>
			</view>			
		</view>
		<view class="list">
			<view class="item">
				<view>消费总额</view>
				<view class="text-price text-bold text-red text-df">{{ Info.total_money }}</view>
			</view>
			<view class="item">
				<view>姓名</view>
				<view>{{ Info.weixin_name }}</view>
			</view>				
			<view class="item">
				<view>性别</view>
				<view>未填写</view>
			</view>	
			<view class="item">
				<view>QQ</view>
				<view>{{ Info.qq }}</view>
			</view>	
			<view class="item">
				<view>生日</view>
				<view>{{ Info.birthday }}</view>
			</view>	
			<view class="item">
				<view>地区</view>
				<view>{{ Info.city }}{{ Info.province }}</view>
			</view>
			<view class="item">
				<view>职业</view>
				<view>{{ Info.occupation }}</view>
			</view>				
		</view>
	</view>
</template>

<script>
	import { teamPerson } from '@/common/api/lbt'
	export default {
		name:'teamPerson',
		data () {
			return {
				Info: {}
			}
		},
		onLoad (options) {
			this.getInfo(options.id)
		},
		computed: {
			avatar () {
				if (this.Info.weixin_headimgurl) {
					return this.Info.weixin_headimgurl
				} else {
					return '/static/profile.png'
				}
			}			
		},
		methods: {
			getInfo (persion_id) {
				uni.showLoading()
				teamPerson({ persion_id }).then(res => {
					uni.hideLoading()
					if (!res.code) {
						let list = []
						for (let  i in res.data.member.ident) list.push(res.data.member.ident[i])
						res.data.member.ident = list
						this.Info = res.data.member
					}
				})
			}
		}
	}
</script>

<style lang="less">
@import '../../common/styles/variables.less'; 	
.tDetail {
	.avatar {
		width: 150upx;
		height: 150upx;
		border-radius: 50%;
		overflow:hidden;
	}	
	.top {
		background-color:@headBg;
		color: white;
		display: flex;
		padding: 40upx 15px;
		& > view {
			&:first-of-type {
				width: 150upx;
				margin-right: 20upx;
				display: flex;
				align-items: center;
				& > view {
					background-repeat: no-repeat;
					background-size: cover;
					background-position: top center;
					padding-top: 100%;
					border-radius: 50%;
				}
			}		
			&:last-of-type {
				display: flex;
				flex-flow: column;
				flex-direction: column;
				justify-content: space-between;
				padding: 10upx 0;
				& > view {
					display: flex;
					align-items: center;
					.id {
						background: white;
						border-radius: 15upx;
						color: rgb(196,144,192);
						font-size: @minSize;
						padding: 5upx 20upx;
						display: block;
						&:not(:last-of-type) {
							margin-right: 10upx
						}
					}					
				}					
				& > text {
					&.name {
						font-size: @title;
					}
					&.tx {
						font-size: @minSize;
					}
				}
			}
		}
	}
	.list {
		.item {
			height: @height;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: white;
			padding: 0 15upx;
			&:not(:last-of-type) {
				.border-bottom(15upx)
			}
			&:nth-of-type(1) {
				margin-bottom: 15upx;
				&::after {
					display: none;
				}
			}
		}
	}
}
</style>
